<template>
    <!-- 头部 -->
    <header class="post-header">
        <div class="post-header-div">
            <div class="post-header-item">
                <van-image
                round
                width="40px"
                height="40px"
                :src='comment_userimg'
                id="owner-img"
                class="header-img"
                />
            </div>

            <div class="post-header-item info">
                <div id="post-ownername">{{comment_name}}</div>
                <div id="post-time">{{comment_time}}</div>
            </div>
            <div class="post-header-item commment-interact">
                <van-icon 
                name="good-job-o" 
                size="20px" 
                id="comment-thumb" 
                v-if="!comment_liked"
                @click="changeLike($event, comment_index)"/>
                <van-icon
                name="good-job"
                size="20px"
                v-if="comment_liked"
                @click="changeLike($event,comment_index)"/>
                <span class="thumb-count">{{comment_like}}</span>
                <van-icon name="comment-o" size="20px"  id="comment-commments" @click="addChild(this.comment_index)"/>
            </div>
        </div>
    </header>
    <!-- 头部结束 -->

    <!-- 评论内容 -->
    <p class="main-comment" @click="addChild(comment_index)">
        {{comment_content}}
    </p>
    <ul class="comment-img" v-if="hasImg">
        <li v-for="(img, index) in comment_imgs" :key="index">
            <img :src="img" alt="">
        </li>
    </ul>
    <!-- 评论内容结束 -->

    <!-- 子评论 -->
    <section v-if="hasChild">
        <div class="child-comments">
            <ul class="child-comments-ul">
                <li>
                    <div v-for="(item, index) in showingChild" :key="index">
                        <p class="commment-list" @click="onOpen()"><a>{{item.origin}}</a> 回复 <a>{{item.to}}</a>:{{item.content}}</p>
                    </div>
                    
                </li>
            </ul>
            <p class="comment-open" @click="onOpen()">查看全部{{count}}条评论></p>
            
            <!-- 点击查看子评论的弹出面板 -->
            <van-popup
            :show="show"
            position="bottom"
            custom-style="height: 60%;z-index: 999"
            bind:close="onClose"
            :round = "hasRound"
            :close-on-click-overlay = "hasClickOverLay"
            >
                <div class="popup-div" id="child-comment">
                    <!-- 吸顶头部 -->
                    <van-sticky offset-top="67px">
                        <div class="child-detail-header">
                            <van-icon name="cross" @click="onClose" id="close-overlay"/>
                            <h3>{{comment_position}}楼的回复</h3>
                        </div>
                    </van-sticky>
                    <!-- 吸顶头部结束 -->

                    <!-- 子评论列表 -->
                    <div class="popup-div-content">
                        <ul class="comment-detail-ul">
                            <!-- 楼主的主评论 -->
                            <li id="main-child">
                                <div class="post-comment-div">
                                    <div class="post-child-comment-item">
                                        <van-image
                                        round
                                        width="40px"
                                        height="40px"
                                        :src='comment_userimg'
                                        id="post-comment-userimg"
                                        />
                                    </div>
                                    <div class="post-child-comment-item">
                                        <div class="post-comment-ownername">{{comment_name}}</div>
                                        <div id="post-comment-time">{{comment_time}}</div>
                                    </div>
                                </div>
                                <p class="detail-reply">{{comment_content}}</p>
                                <ul class="comment-img" v-if="hasImg">
                                    <li v-for="(img, index) in comment_imgs" :key="index">
                                        <img :src="img" alt="">
                                    </li>
                                </ul>
                            </li>
                            <!-- 楼主的主评论结束 -->
                            <hr width="350px">
                            <!-- 子评论 -->
                            <li v-for="item in child_items" :key="item.index">
                                <div class="post-comment-div">
                                    <div class="post-child-comment-item">
                                        <van-image
                                        round
                                        width="40px"
                                        height="40px"
                                        :src='item.avatar.avatar'
                                        id="post-comment-userimg"
                                        />
                                    </div>
                                    <div class="post-child-comment-item">
                                        <div class="post-comment-ownername">{{item.origin}}</div>
                                        <div id="post-comment-time">{{getTimeBefore(item.time)}}</div>
                                    </div>
                                </div>
                                <p class="detail-reply reply-item">回复<a href="@">{{item.to}}</a>:{{item.content}}</p>
                                <div class="post-child-comment-item commment-child-interact">
                                        <van-icon 
                                        name="good-job-o" 
                                        size="20px" 
                                        id="comment-thumb" 
                                        v-if="!item.liked"
                                        @click="changeLike($event,item.index)"/>
                                        <van-icon
                                        name="good-job"
                                        size="20px"
                                        v-if="item.liked"
                                        @click="changeLike($event,item.index)"/>
                                    <span class="thumb-count">{{item.like}}</span>
                                    <van-icon name="comment-o" size="20px"  id="comment-commments" @click="addChild(item.index)"/>
                                </div>
                            </li>
                            <!-- 子评论结束 -->
                        </ul>
                    </div>
                    <!-- 子评论列表结束 -->

                </div>
            </van-popup>
            <!-- 点击查看子评论的弹出面板结束 -->
            <!-- 评论子评论 -->
            <input-comment 
            :toShow="showCommentInput" 
            :target="to_comment_target"
            :target_said="to_comment_target_said"
            :has_img="false"
            :has_target="true"
            @commentClose="closeComment()"
            @commentSubmiit="getSubmiitedComment"
            ></input-comment>
            <!-- 评论子评论结束 -->
        </div>
    </section>
    <!-- 子评论结束 -->
</template>

<script>
import {Image, NavBar,Icon, Tag, Popup, Sticky} from 'vant'
import Comment from "./Comment.vue"
import { formatTime } from "@/utils/formatTime";
import {showStatusTip} from "@/utils/loginStatus.js"

export default {
    data(){
        return{
          child_items: [],
          showingChild:[],
          count: 0,
          show: false,
          hasRound: true,
          hasClickOverLay: true,
          hasChild: false,
          img: require('../../assets/Portrait/jiaran.webp'),
          sticky_target: null,
          showCommentInput: false,
          to_comment_target: null,
          to_comment_target_said: null,
          to_comment_target_index: null,
          hasImg: false,
        }
    },
    components: {
        [Image.name]:Image,
        [NavBar.name]:NavBar,
        [Icon.name]:Icon,
        [Tag.name]:Tag,
        [Popup.name]:Popup,
        [Sticky.name]:Sticky,
        'input-comment': Comment
    },
    props: {
      comment_userimg: {
        type: String
      },
      comment_name: {
          type: String
      },
      comment_time: {
          type: String
      },
      comment_content: {
          type:String
      },
      comment_index: {
          type: String
      },
      comment_children: {
          type:Array
      },
      comment_position: {
          type: Number
      },
      comment_like: {
          type: Number,
          default: 0
      },
      comment_liked: {
          type: Boolean,
          default: false
      },
      comment_imgs: {
          type: Array
      }
    },
    methods:{
        //格式化时间
        getTimeBefore(time){
            const str = formatTime(time);
            let minute = 0;
            return minute >= 0 ? str : 0;
        },
        //计算评论数
        calcCount(){
            this.count = this.child_items.length
        },
        //打开子评论弹出面板
        onOpen(){
            this.show = true;
        },
        //关闭子评论弹出面板
        onClose() {
            this.show =false;
        },
        //唤起输入框
        //from: 这评论主人索引id
        addChild(from){
            if (sessionStorage.getItem("username") == null){
                showStatusTip(null, "\n游客登陆无法评论")
             }
             else if(sessionStorage.getItem("username") != null && sessionStorage.getItem("visitor") == 'true') {
                showStatusTip(null, "\n未审核用户无法评论")
             }
            else{
                this.hasChild = true
                this.showCommentInput = true
                let index = -1
                for (let i = 0; i < this.child_items.length; i++){
                    if (this.child_items[i].index == from){
                        index = i
                    }
                }
                this.to_comment_target_index = from
                if (index >= 0)
                {
                    this.to_comment_target = this.child_items[index].origin
                    this.to_comment_target_said = this.child_items[index].content
                }
                else{
                    this.to_comment_target = this.comment_name
                    this.to_comment_target_said = this.comment_content
                }
            }

        },
        //关闭输入评论框
        closeComment(){
            this.showCommentInput = false
            if (this.child_items.length == 0)
                this.hasChild = false
        },
        //提交评论
        //to: 评论的评论的id
        //content: 评论的内容
        getSubmiitedComment(to, content){
            this.showCommentInput = false 
            this.$emit('addChild', this.to_comment_target_index, content)
            this.calcCount()
        },
        //点赞或取消点赞
        //e: 点击的页面对象
        //index: 点赞对象的id
        changeLike(e, index){
            if (sessionStorage.getItem("username") == null){
            }
            else if(sessionStorage.getItem("username") != null && sessionStorage.getItem("visitor") == 'true') {
            }
            else{
                if (e.target.className == "van-badge__wrapper van-icon van-icon-good-job-o")
                    e.target.className = "van-badge__wrapper van-icon van-icon-good-job"
                else{
                    e.target.className = "van-badge__wrapper van-icon van-icon-good-job-o"
                }
            }
            this.$emit('changeLike', index, this.comment_position)
        }
    },
    mounted(){

        if (this.comment_imgs != "[]")
            this.hasImg = true
        this.child_items = this.comment_children
        this.showingChild = this.child_items
        if (this.child_items.length > 0){
            this.calcCount()
            this.hasChild = true
            //超过五条只显示五条
            if (this.count >= 5)
            {
                this.showingChild = this.child_items.slice(0, 5)
            }
        }else{
            this.hasChild = false
        }
    },
    watch: {
        //检测子评论的添加来实时改变页面
        comment_children(newS, oldS) {
            this.child_items = newS
            this.showingChild = this.child_items
            if (this.child_items.length > 0){
                this.calcCount()
                this.hasChild = true
                //超过五条只显示五条
                if (this.count >= 5)
                {
                    this.showingChild = this.child_items.slice(0, 5)
                }
            }else{
                this.hasChild = false
            }
        }
    } ,
    emits: ['addChild', 'changeLike']
}
</script>

// 主评论样式
<style scoped>
hr{
    margin-top: 20px;
}

.post-header{
    text-align: left;
    background-color: rgb(255, 255, 255);
}

.post-header-div{
    display: flex;
}

#owner-img{
    margin-left: 20px;
    margin-top: 10px;
}

#post-ownername{
    margin-top: 5px;
    font-size: 18px;
    margin-left: 10px;
    text-decoration: none;
    font-weight: bold;
}

#post-time{
    font-size: 13px;
    color: rgb(99, 99, 99);
    margin-top: 5px;
    margin-left: 10px;
}

.main-comment{
  font-size: 18px;
  margin-right: 15px;
  margin-left: 70px;
  margin-bottom: 10px;
  text-align: left;
  z-index: 999;
}

.info{
    width: 110px;
}

.commment-interact{
    margin-top: 8px;
    margin-left: 100px;
    display: flex;
    justify-content: space-between;
}

.commment-list{
    width: 200px;
    word-break:break-all;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    max-height:4.2em;
    overflow:hidden;

}

.thumb-count{
    font-size: 16px;
    margin-top: 2px;
    margin-left: 5px;
}

#main-child{
    margin-bottom: 5px;
}

.comment-img li{
    text-align: center;
}

.comment-img img{
    max-width: 90%;
}

</style>

// 子评论样式
<style scoped>

.child-comments p{
    margin-top: 0px;
    margin-bottom: 3px;
    margin-right: 25px;
    font-size: 16px;
}

.child-comments-ul{
    margin-top: 10px;
    margin-right: 25px;
    margin-left: 58px;
    border-radius: 5px;
    background-color: rgb(243, 243, 243);
}

.child-comments-ul li{
    background-color: rgb(243, 243, 243);
    text-align: left;
    padding: 10px;
}

.child-comments-ul li a{
    color: #1989fa;
    font-weight: bold;
}

.comment-open{
    text-align: left;
    background-color: rgb(243, 243, 243);
    margin-right: 25px;
    margin-left: 58px;
    padding-left: 10px;
}

.child-detail-header{
    display: flex;
    height: 50px;
    background-color: rgb(243, 243, 243);
    border-radius: 15px 15px 0px 0px;
}

#close-overlay{
    margin-top: 13px;
    margin-left: 20px;
}

.child-detail-header h3{
    font-size: 20px;
    margin-top: 10px;
    margin-left: 90px;
}

.comment-detail-ul li{
background-color: rgb(243, 243, 243);
}

.post-comment-div{
    display: flex;
}

#post-comment-userimg{
    margin-left: 20px;
    margin-top: 10px;
}

.post-comment-ownername{
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 8px;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
    text-decoration: none;
    text-align: left;
}

#post-comment-time{
    font-size: 13px;
    color: rgb(99, 99, 99);
    margin-top: 5px;
    margin-left: 10px;
    text-align: left;
}

.commment-child-interact{
    margin-top: 8px;
    margin-left: 230px;
}

#comment-commments{
    margin-left: 20px;
}

.detail-reply{
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;

}

.reply-item{
    font-size: 16px;
}

.popup-div{
    overflow: scroll;
    background-color: rgb(243, 243, 243);
    height: 600px;
}

.popup-div-content{
    height: 85%;
}
</style>